<template>
	<div id="tmpl">
		<div class="top">购物车</div>
		<div class="row" v-for="(item,index) in datalist">
			<mt-switch class="switch" v-model="value[index]"></mt-switch>
			<img :src="item.thumb_path" alt="商品图片">
			<div class="inforight">
				<h4>{{item.title}}</h4>
				<div class="bottom">
					<ul>
						<li>￥{{item.sell_price}}</li>
						<li><carinputNumber :initCount="item.cou" :goodsId="item.id" v-on:carsend="getInputNumber"></carinputNumber></li>
						<li><a href="javascript:;" @click="delrow(item.id,index)">删除</a></li>
					</ul>
				</div>				
			</div>
		</div>
		<div id="total">
			<div class="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选{{totalcount}}件,总价￥{{totalAmount}}元</li>
				</ul>
			</div>
			<div id="btn">
				<mt-button type="danger" size="small">去结算</mt-button>
			</div>
		</div>
		{{value}}
	</div>
</template>
<script type="text/javascript">
import common from '../../kits/common.js';
import {Toast} from 'mint-ui';
import carinputNumber from '../subcom/carinputNumber.vue';
import {getItem,getgoodsObject,updateData,removeItem} from '../../kits/localSg.js';

	export default{
		components:{
			carinputNumber
		},
		computed:{
			totalcount(){
				var count = 0;
				var amount=0;
				for (var i = 0; i < this.value.length; i++) {
					if (this.value[i]==true) {
						count=count+1;
						amount+=this.datalist[i].sell_price*this.datalist[i].cou
					}
				}
				this.totalAmount = amount;
				return count;
			}
		},
		data(){
			return{
				value:[],
				datalist:[],
				totalAmount:0,
			}
		},
		created(){
			this.getdatalist();
		},
		methods:{
			delrow(goodsId,index){
				this.value.splice(index,1);
				this.datalist.splice(index,1);
				removeItem(goodsId);
			},
			getInputNumber(resObj){
				updateData(resObj);
				
				for (var i = 0; i < this.datalist.length; i++) {
					if(this.datalist[i].id=resObj.goodsId){
						if (resObj.type=='add') {
							this.datalist[i].cou = this.datalist[i].cou + 1;
						}else{
							if (this.datalist[i].cou<1) {
								return;
							}
							this.datalist[i].cou = this.datalist[i].cou - 1;
						}
						break;
					}
				}
			},
			getdatalist(){
				var obj = getgoodsObject();

				var idstring = '';
				for (var key in obj) {
					idstring += key+',';
				}
				idstring = idstring.substring(0,idstring.length-1);
				var url = common.apidomain+'/api/goods/getshopcarlist/'+idstring;
				this.$http.get(url).then(function(response){
					var data = response.body;
					if (data.status != 0) {
						Toast(data.message);
						return;
					} 
					data.message.forEach((item)=>{
						item.cou = obj[item.id];
						this.value.push(false);
					})
					this.datalist = data.message;
				}) 
			},
			
		}
	}
</script>
<style type="text/css" scoped>
	.top {
		width: 100%;
		line-height: 25px;
		text-align: center;
		background-color: #ccc;
		color: #369;
		margin-top: 0px;
	}
	.row {
		border-bottom: 1px solid rgba(0,0,0,.3);
		display: flex;
	}
	.switch {
		flex:0 0 52px;
	}
	img{
		margin-left: 5px;
		height: 75px;
		height: 75px;
		flex:0 0 75;
	}
	.inforight{
		margin-left: 5px;
		flex: 1;
	}
	.inforight ul {
		padding-left: 0;
	}
	.inforight li {
		list-style: none;
		float: left;
		margin-left: 5px;
	}
	.inforight h4 {
		color: #0094ff;
		font-size: 14px;
	}
	.bottom li:first-child {
		color: red;
	}
	.bottom li:last-child {
		margin-left: 5px;
	}
	#total {
		background-color: #ccc;
		height: 100px;
		display: flex;
	}
	#total li {
		list-style: none;
		margin-top: 20px;
	}
	#total .desc {
		flex:3;
	}
	#total .desc ul{
		padding-left: 10px;
		
	}
	#total #btn {
		flex:1;
		margin-left: 10px;
		margin-top: 40px;
	}
</style>